import { Item, ItemPanel } from '@/components/GGEditor';
import { Card } from 'antd';
import React from 'react';
import styles from './index.less';
import judge from './svg/judge.svg';
import normal from './svg/normal.svg';
import start from './svg/start.svg';
import Connect from '@/components/Connect';
import useModel from '../../useModel';

const FlowItemPanel = props => {
  const { customAllList = [], fnList } = props;
  const startFields = fnList.reduce((prev, cur, index, arr) => {
    return Object.assign(prev, cur.data);
  }, {});
  const zero = fnList.filter(item => {
    return item.schema.includes(0);
  });
  const one = fnList.filter(item => {
    return item.schema.includes(1);
  });
  if (zero[0]?.data?.hasOwnProperty('msgId') && customAllList[0]?.id) {
    zero[0].data['msgId'] = customAllList[0].id;
  }

  return (
    <ItemPanel className={styles.itemPanel}>
      <Card bordered={false}>
        <Item
          type="node"
          size="72*72"
          shape="flow-circle"
          model={{
            color: '#FA8C16',
            label: '开始/结束',
            schema: 0,
            method: (zero[0] && zero[0].method) || undefined,
            data: (zero[0] && zero[0].data) || {},
          }}
          src={start}
        />
        <Item
          type="node"
          size="80*48"
          shape="flow-rect"
          model={{
            color: '#1890FF',
            label: '流程节点',
            schema: 1,
            method: (one[0] && one[0].method) || undefined,
            data: (one[0] && one[0].data) || {},
          }}
          src={normal}
        />
        <Item
          type="node"
          size="80*72"
          shape="flow-rhombus"
          model={{
            color: '#13C2C2',
            label: '判断',
            schema: 2,
          }}
          src={judge}
        />
        {/* <Item
        type="node"
        size="80*48"
        shape="flow-capsule"
        model={{
          color: '#722ED1',
          label: 'Model',
        }}
        src=""
      /> */}
      </Card>
    </ItemPanel>
  );
};

export default Connect(state => {
  return {
    customAllList: state.customAllList,
    fnList: state.fnList,
  };
}, useModel)(FlowItemPanel);
